<template>
  <div>
    <div class="head-container">
      <el-input
        v-model="deptName"
        placeholder="请输入部门名称"
        clearable
        size="small"
        prefix-icon="el-icon-search"
        style="margin-bottom: 20px"
      />
    </div>
    <div class="head-container">
      <el-tree
        ref="tree"
        :data="departmentAllListData"
        :props="defaultProps"
        node-key="id"
        :expand-on-click-node="false"
        :filter-node-method="handleFilterNode"
        :default-expanded-keys="defaultExpandedKeys"
        highlight-current
        @node-click="handleNodeClick"></el-tree>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'RecordLeft',
    mixins: [],
    components: {},
    data() {
      return {
        searchKey: {},
        defaultProps: { // 左侧tree
          children: 'children',
          label: 'label'
        },
        deptName: null // 部门名称
      }
    },
    props: {
      initParams: { // 初始参数
        type: Object,
        required: true,
        default() {
          return {}
        }
      },
      searchParams: { // 搜索参数
        type: Object,
        required: true,
        default() {
          return {}
        }
      },
      departmentAllListData: { // 下拉的部门列表
        type: Array,
        required: true,
        default() {
          return []
        }
      }
    },
    computed: {
      defaultExpandedKeys() {
        let { departmentAllListData } = this
        let allKeys = this.getKeys(departmentAllListData)
        /* departmentAllListData.forEach((item, index) => {
          let keys = this.getKeys(item.children)
          allKeys = [...allKeys, ...keys]
        }) */
        return allKeys
      }
    },
    methods: {
      getKeys(data) {
        let filterData = data.filter((item) => {
          return item.children && item.children.length > 0
        })
        return filterData.map(item => item.id)
      },
      handleFilterNode(value, data) { // 筛选节点
        if (!value) return true
        return data.label.indexOf(value) !== -1
      },
      handleNodeClick(data) {
        this.searchKey = {
          ...this.searchKey,
          ...{
            deptId: data.pid === 0 ? null : data.id
          }
        }
        this.$emit('on-init', {
          searchKey: this.searchKey,
          departmentInfo: data
        })
      },
      async initData() { // 初始化数据
      }
    },
    watch: {
      searchParams: {
        handler: function(newVal, oldVal) {
          if (JSON.stringify(newVal) !== JSON.stringify(this.searchKey)) {
            this.searchKey = JSON.parse(JSON.stringify(newVal))
          }
        },
        deep: true,
        immediate: true
      },
      deptName(val) { // 根据名称筛选部门树
        this.$refs.tree.filter(val)
      }
    },
    created() {
    },
    mounted() {
    }
  }
</script>

<style lang="scss" scoped>

</style>
